<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的定位</title>
    <link rel="stylesheet" href="/static/css/my-demo.css">
</head>
<body>
<div>
    <h1>一. 定位详解</h1>
    <h2>1.1 相对定位</h2>
    <div class="relative-demo">
        <style>

            .relative-demo {
                width: 800px;
                height: 400px;
                padding: 20px;
            }

            .relative-demo p {
                border: 1px solid red;
            }

            .relative-demo img {
                /*
                说明:
                    1. `position: relative;`就是声明这个元素时相对定位.
                        - 这个相对是相对于在该元素在文档流中的位置;
                        - 设置相对定位之后就可以使用top, bottom, right, left来控制这个元素的位置了, 但是需要注意的是:
                            1. 相对定位的元素仍旧占用文档流的位置, 只是显示的位置变了;
                            2. top与bottom属性想矛盾, left和right属性相矛盾.
                                - 同一径向用一个属性控制位置即可;
                            3. top等元素的值可以为负值.
                */
                position: relative;
                top: 30px;
                left: 30px;
            }

        </style>
        <p>
            <img src="/static/images/face/50.gif">
            后盾人不断更新优秀视频教程，感谢大家关注、分享、点赞、评论
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        </p>
    </div>
    <h2>1.2 绝对定位</h2>
    <div>
        <style>

            .absolute-demo {
                width: 800px;
                height: 400px;
                padding: 20px;
                border: 1px solid red;
            }

            .absolute-demo2 {
                width: 800px;
                height: 400px;
                padding: 20px;
                position: relative;
                border: 1px solid red;
            }

            .absolute-demo img {
                /*
                说明:
                    1. 绝对定位的元素默认是以整个页面为参考的;
                        - 可以给父元素设置`相对定位`来使当前元素的参考元素变为父元素.
                */
                position: absolute;
                top: 0;
                right: 0;
            }

            .absolute-demo2 img {
                /*
                说明:
                    1. 绝对定位的元素默认是以整个页面为参考的;
                        - 如果父级元素设置了 relative | fixed | sticky ，绝对定位子元素将参数此父元素进行定位。
                */
                position: absolute;
                top: 0;
                right: 0;
            }

        </style>
        <p class="absolute-demo">
            <img src="/static/images/face/50.gif">
            后盾人不断更新优秀视频教程，感谢大家关注、分享、点赞、评论
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        </p>
        <p class="absolute-demo2">
            <img src="/static/images/face/50.gif">
            后盾人不断更新优秀视频教程，感谢大家关注、分享、点赞、评论
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
            无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        </p>
    </div>
    <h2>1.3 绝对定位的元素如果没有设置固定尺寸, 定位会影响元素尺寸</h2>
    <style>

        .abs-article > div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
            float: left;
            overflow: hidden;
            margin: 20px;
        }

        .abs-article > div > div {
            position: absolute;
            background-color: yellow;
        }

        .abs-demo-1 > div {
            left: 100px;
            top: 100px;
            right: 100px;
            bottom: 100px;
        }

        /*
        说明:
            1. left属性比right属性的有限度高;
            2. top属性比bottom属性优先级高;
            3. 对比`.abs-demo-1 > div`会发现, 在设置了width和height之后, 定位属性就不能影响尺寸了.
                - `.abs-demo-1 > div`中由于没有设置固定尺寸, 定位属性就影响了尺寸. (这个不常用, 因为定位元素一般都会设置尺寸, 算是一个细节)
         */
        .abs-demo-2 > div {
            width: 50px;
            height: 50px;
            bottom: 100px;
            right: 100px;
            left: 100px;
            top: 100px;
        }

        .abs-demo-3 > div {
            bottom: 0;
            right: 0;
            left: 50%;
            top: 0;
        }

        .abs-demo-4 > div {
            bottom: 0;
            right: 0;
            left: 50%;
            top: 0;
            border-radius: 50%;
        }


    </style>
    <article class="abs-article">
        <div class="abs-demo-1">
            <div></div>
        </div>
        <div class="abs-demo-2">
            <div></div>
        </div>
        <div class="abs-demo-3">
            <div></div>
        </div>
        <div class="abs-demo-4">
            <div></div>
        </div>
    </article>
    <h2 style="clear: both;">1.4 使元素在容器中心显示的两种方式</h2>
    <article>
        <style>

            .center-demo-1 {
                width: 400px;
                height: 400px;
                border: 1px solid black;
                position: relative;
            }

            .center-demo-2 {
                width: 600px;
                height: 600px;
                border: 1px solid black;
                position: relative;
            }

            /*
            说明:
                1. 这种居中方式是根据计算得出的: 算出居中定位尺寸(400 - 200) / 2 = 100px;
                2. 这种居中方式的缺点是:
                    - 居中属性依赖父元素尺寸, 父元素尺寸变化时, 该元素不再居中;
            */
            .center-demo-1 div {
                height: 200px;
                width: 200px;
                position: absolute;
                left: 100px;
                top: 100px;
                background-color: yellow;
            }

            /*
            说明:
                1. 这种居中方式的尺寸不依赖父元素的尺寸, 整体向右下偏移50%, 然后再向回缩自身尺寸的一般, 正好位于中间.
            */
            .center-demo-2 div {
                height: 200px;
                width: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -100px;
                background-color: yellow;
            }

        </style>
        <div class="center-demo-1">
            <div></div>
        </div>
        <div class="center-demo-2">
            <div></div>
        </div>
    </article>
    <h2>1.5 元素多级定位优先级</h2>
    <style>

        .many-abs {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }

        .many-abs section {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 300px;
            top: 300px;
            background-color: #37c3ff;
        }

        .many-abs div {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            background-color: yellow;
        }

    </style>
    <article class="many-abs">
        <section>
            <!--
            说明:
                1. 观察这个div所参考的元素可以发现, 在多级定位的情况下, 定位元素默认会找离它最近的定位型父元素, 也就是说这里的这个div
                参考的位置元素为section.
            -->
            <div></div>
        </section>
        <!--
        说明:
            1. 对比上面那个section中的div, 会发现, 这个元素参考的是article.
        -->
        <div></div>
    </article>
    <h2>1.6 滚动条对定位元素的影响</h2>
    <style>

        .scroll-demo {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
            overflow: auto;
        }

        .scroll-demo section {
            width: 100%;
            height: 3000px;
            background-color: #1af5ff;
        }

        /*
        说明:
            1. 定位元素会随着滚动条而滚动.
        */
        .scroll-demo section div {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: yellow;
            left: 0;
            bottom: 0;
        }

    </style>
    <article class="scroll-demo">
        <section>
            <div></div>
        </section>
    </article>
    <h2>1.7 制作一个图片上有热度标签的</h2>
    <style>

        .hot-img-list {
            width: 1200px;
            margin: 0 auto;
            padding: 30px;
        }

        .hot-img-list ul {
            list-style: none;
            overflow: hidden;
        }

        .hot-img-list ul li {
            width: 300px;
            height: 200px;
            border: solid 2px black;
            float: left;
            margin: 10px;
            position: relative;
            cursor: pointer;
        }

        .hot-img-list ul li img {
            width: 100%;
            height: 100%;
            z-index: 2;
            position: absolute;
        }

        .hot-img-list ul li span {
            width: 30px;
            height: 30px;
            border: solid 1px black;
            position: absolute;
            left: 10px;
            top: 10px;
            border-radius: 50%;
            text-align: center;
            background-color: #025aa5;
            color: red;
            line-height: 30px;
            z-index: 3;
        }

    </style>
    <article class="hot-img-list">
        <ul>
            <li>
                <span>热</span>
                <img src="/static/images/face/datu.jpg" />
            </li>
            <li>
                <span>热</span>
                <img src="/static/images/face/datu.jpg" />
            </li>
            <li>
                <span>热</span>
                <img src="/static/images/face/datu.jpg" />
            </li>
        </ul>
    </article>
</div>
<div>
    <h1>二. 固定定位和粘性定位</h1>
    <h2>2.1 固定定位简单demo</h2>
    <style>
        .my-fixed header {
            height: 60px;
            border-bottom: solid 5px #7f35c9;
            box-shadow: 0 5px 8px rgba(100, 100, 100, 0.6);
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
        }
        .my-fixed article {
            height: 3000px;
            margin-top: 80px;
            background: #f3f3f3;
            border: solid 5px #ddd;
        }

    </style>
    <div class="my-fixed">
        <header></header>
        <article></article>
    </div>
    <h2>2.2 粘性定位简单demo</h2>
    <style>

        .my-sticky1 main {
            padding: 30px;
            font-size: 14px;
        }
        .my-sticky1 main article {
            width: 400px;
            height: 100px;
            border: solid 5px blueviolet;
            overflow: scroll;
        }
        .my-sticky1 main article h2 {
            background: #db1f77;
            color: white;
            text-indent: 20px;
            position: sticky;
            top: 0;
        }
        .my-sticky1 main article h2:nth-of-type(1) {
            background: blueviolet;
        }
        .my-sticky1 main article section {
            height: 300px;
        }

    </style>
    <div class="my-sticky1">
        <main>
            <article>
                <section></section>
                <h2>后盾人</h2>
                <section></section>
                <h2>HOUDUNREN</h2>
                <section></section>
            </article>
        </main>
    </div>
    <h2>2.3 非同级定位简单demo</h2>
    <style>

        .my-sticky main {
            padding: 30px;
            font-size: 14px;
        }

        .my-sticky main article {
            width: 400px;
            border: solid 5px blueviolet;
            height: 200px;
            overflow: scroll;
        }

        .my-sticky main article section:nth-of-type(odd) h2 {
            background: blueviolet;
        }

        .my-sticky main article section h2 {
            background: #db1f77;
            color: white;
            text-indent: 20px;
            position: sticky;
            top: 0;
        }

        .my-sticky main article section p {
            padding: 20px;
        }
    </style>
    <div class="my-sticky">
        <main>
            <article>
                <section>
                    <h2>hdcms.com</h2>
                    <p>
                        后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。
                    </p>
                </section>
                <section>
                    <h2>后盾人</h2>
                    <p>
                        后盾人隶属于北京后盾计算机技术培训有限责任公司，是专注于培养中国互联网精英PHP程序语言专业人才的专业型培训机构，拥有七年培训行业经验。后盾人拥有国内一线的讲师和技术团队，团队成员项目经验均在8年以上，团队曾多次为国内外上市集团、政府机关的大型项目提供技术支持，其中包括新浪、搜狐、腾讯、宝洁公司、联想、丰田、工商银行、中国一汽等众多大众所熟知的知名企业。
                    </p>
                </section>
                <section>
                    <h2>houdunwang.com</h2>
                    <p>
                        后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。
                    </p>
                </section>
            </article>
        </main>
    </div>
</div>
<div>
    <h1>三. 定位搭配hover实现js给元素绑定事件一样的效果</h1>
    <h2>3.1 简单demo1</h2>
    <style>

        .info {
            z-index: 1;
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #b3b3b3;
            text-align: center;
            line-height: 6em;
        }

        .hot-img-list ul li:hover img {
            z-index: -1;
        }

    </style>
    <article class="hot-img-list">
        <ul>
            <li>
                <span>热</span>
                <img src="/static/images/face/datu.jpg" />
                <div class="info">
                    我是信息1
                </div>
            </li>
            <li>
                <span>热</span>
                <img src="/static/images/face/datu.jpg" />
                <div class="info">
                    我是信息2
                </div>
            </li>
            <li>
                <span>热</span>
                <img src="/static/images/face/datu.jpg" />
                <div class="info">
                    我是信息3
                </div>
            </li>
        </ul>
    </article>
    <h2>3.2 简单demo2</h2>
    <style>

        .shopping {
            margin: 0 auto;
            position: relative;
            width: 150px;
            cursor: pointer;
        }

        .shopping div {
            height: 50px;
            border: 1px solid black;
            text-align: center;
            line-height: 3em;
        }

        .shopping div:nth-of-type(1) {
            position: relative;
            z-index: 2;
            width: 150px;
            background-color: white;
            right: 0;
        }

        .shopping div:nth-of-type(2) {
            width: 300px;
            position: absolute;
            top: 50px;
            z-index: 1;
            right: -4px;
            display: none;
        }

        .shopping div:nth-of-type(1):hover {
            border-bottom: none;
        }

        .shopping:hover div:nth-of-type(1) {
            border: 2px solid blue;
            border-bottom: none;
        }

        .shopping:hover div:nth-of-type(2) {
            border: 2px solid blue;
            display: block;
        }

    </style>
    <article class="shopping">
        <div>我的购物车</div>
        <div>购物车中暂无商品</div>
    </article>
    <h2>3.3 使用fixed布局属性创建一个机遇页面的布局元素</h2>
    <style>

        .go-top div {
            /*
            说明:
                1. fixed元素时相对于当前窗口页面的, 元素会固定在设定的位置上, 不随着页面的滚动而滚动.
            */
            position: fixed;
            background-color: #b3b3b3;
            width: 50px;
            height: 50px;
            border: 2px solid black;
            bottom: 100px;
            right: 100px;
        }

    </style>
    <article class="go-top">
        <div>
            <button>回到顶部</button>
        </div>
    </article>
</div>
</body>
</html>